<template>
  <div class="security-box">
    <van-nav-bar
      title="账户安全"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-cell-group class="cell-group">
      <van-cell
        title="绑定手机"
        is-link
        :value="form.phoneNum"
        @click="onClickBindPhone"
      />
      <van-cell
        title="修改密码"
        is-link
        @click="onClickChangePassword"
      />
    </van-cell-group>

    <van-cell-group class="cell-group">
      <van-cell
        title="第三方账号"
        is-link
        @click="onClickThirdAccount"
      />
    </van-cell-group>

    <!-- 绑定手机 -->
    <van-popup v-model="showBindPhone" position="right" class="pop-container">
      <van-nav-bar
        title="修改手机号"
        left-arrow
        @click-left="onClickBindPhoneLeft"
      />
      <div class="pop-content">
        <p>验证原手机号：{{ form.phoneNum }}</p>
        <van-cell-group class="pop-phone-cell">
          <van-field
            v-model="popPhoneSms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            class="pop-phone-sms"
          >
            <van-button
              slot="button"
              size="small"
              type="primary"
            >发送验证码</van-button>
          </van-field>
        </van-cell-group>
        <van-button
          size="large"
          class="pop-phone-btn"
          @click="onClickPopPhoneBtn"
        >下一步</van-button>
      </div>
    </van-popup>

    <!-- 绑定手机-下一步 -->
    <van-popup v-model="showBindPhoneNext" position="right" class="pop-container">
      <van-nav-bar
        title="修改手机号"
        left-arrow
        @click-left="onClickBindPhoneNextLeft"
      />
      <div class="pop-content">
        <van-cell-group class="pop-phone-cell">
          <van-field
            v-model="popPhoneNextNum"
            placeholder="请输入新手机号码"
            class="pop-phone-sms"
          />
          <van-field
            v-model="popPhoneNextSms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            class="pop-phone-sms"
          >
            <van-button
              slot="button"
              size="small"
              type="primary"
            >发送验证码</van-button>
          </van-field>
        </van-cell-group>
        <van-button
          size="large"
          class="pop-phone-btn"
          @click="onClickPopPhoneNextConfirm"
        >确定</van-button>
      </div>
    </van-popup>

    <!-- 修改密码 -->
    <van-popup v-model="showResetPassword" position="right" class="pop-container">
      <van-nav-bar
        title="修改手机号"
        left-arrow
        @click-left="onClickResetPassword"
      />
      <van-cell-group>
        <van-field
          v-model="popPasswordOld"
          placeholder="请输入原密码"
        />
        <van-field
          v-model="popPasswordNew"
          placeholder="请输入新密码"
        />
        <van-field
          v-model="popPasswordNewConfirm"
          placeholder="确认新密码"
        />
      </van-cell-group>
      <div class="pop-content">
        <van-button
          size="large"
          class="pop-phone-btn"
          @click="onClickPopPassword"
        >完成</van-button>
        <p class="forget-password" @click="onClickForgetPassword">忘记密码？</p>
      </div>
    </van-popup>

    <!-- 修改密码 -->
    <van-popup v-model="showThirdAccount" position="right" class="pop-container">
      <van-nav-bar
        title="第三方账号"
        left-arrow
        @click-left="onClickThirdAccountLeft"
      />
      <van-cell-group>
        <van-cell
          :value="form.wechatBind ? '已绑定' : '未绑定'"
          is-link
          @click="onClickThirdAccountWechat"
        >
          <template slot="title">
            <!-- <van-tag type="danger">微信</van-tag> -->
            <van-icon name="wechat" />
            <span class="van-cell-text">微信</span>
          </template>
        </van-cell>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    Icon,
    Popup,
    Tag,
    Dialog
  } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Tag.name]: Tag,
      [Dialog.name]: Dialog,
    },
    data() {
      return {
        showBindPhone: false,
        showBindPhoneNext: false,
        showResetPassword: false,
        showThirdAccount: false,
        popPhoneSms: '',
        popPhoneNextSms: '',
        popPhoneNextNum: '',
        popPasswordOld: '',
        popPasswordNew: '',
        popPasswordNewConfirm: '',
        form: {
          phoneNum: '13000000000',
          wechatBind: true
        }
      }
    },
    mounted() {

    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      onClickBindPhone() {
        // 点击绑定手机
        this.showBindPhone = !this.showBindPhone;
      },
      onClickChangePassword() {
        //点击修改密码
        this.showResetPassword = !this.showResetPassword;
      },
      onClickThirdAccount() {
        // 点击第三方账号
        this.showThirdAccount = !this.showThirdAccount;
      },
      onClickBindPhoneLeft() {
        this.showBindPhone = !this.showBindPhone;
      },
      onClickPopPhoneBtn() {
        // 点击下一步
        this.showBindPhoneNext = !this.showBindPhoneNext;
      },
      onClickBindPhoneNextLeft() {
        this.showBindPhoneNext = !this.showBindPhoneNext;
      },
      onClickPopPhoneNextConfirm() {
        // 点击绑定手机号的确定
      },
      onClickResetPassword() {
        this.showResetPassword = !this.showResetPassword;
      },
      onClickPopPassword() {
        // 点击修改密码的完成
      },
      onClickForgetPassword() {
        // 点击忘记密码 跳转忘记密码页面
        this.$router.push('/forget-password');
      },
      onClickThirdAccountLeft() {
        this.showThirdAccount = !this.showThirdAccount;
      },
      onClickThirdAccountWechat() {
        if(this.form.wechatBind) {
          // 已绑定
          Dialog.confirm({
            title: '您是否要解除绑定？',
            message: '解绑后将不能通过该方式登录当前账号'
          }).then(() => {
            // on confirm
          }).catch(() => {
            // on cancel
          });
        }
      }
    }
  }
</script>

<style scoped="scoped">
.security-box {
  height: 100%;
  background-color: #F7F7F7;
}
.cell-group {
  margin-bottom: 10px;
}
.pop-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.pop-content {
  padding: 18px;
}
.pop-content p {
  line-height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
}
.pop-phone-sms:after,
.pop-phone-cell:after {
  border: 0!important;
}
.pop-phone-sms {
  padding: 0;
  margin-top: 15px;
}
.pop-phone-btn {
  margin-top: 20px;
  background-color: #363636;
  color: #fff;
}
.forget-password {
  text-align: right;
  margin-top: 20px;
  line-height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
}
</style>